<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			input {
				padding: 5px;
				text-align: center;

			}

			.a {
				width: 240px;
				height: 400px;
				margin: 100px auto;
				position: relative;
				border: 1px solid red;
				/* overflow: hidden; */
			}

			.container {
				position: relative;
				width: 240px;
				height: 350px;
				overflow: hidden;
			}

			.left {
				display: none;
				position: absolute;
				top: 50%;
				left: -20px;
				transform: translateY(-50%);
				width: 50px;
				height: 50px;
				border-top-right-radius: 50%;
				border-bottom-right-radius: 50%;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 999;
			}

			.right {
				display: none;
				position: absolute;
				top: 50%;
				right: -20px;
				transform: translateY(-50%);
				width: 50px;
				height: 50px;
				border-top-left-radius: 50%;
				border-bottom-left-radius: 50%;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 999;
			}

			ul li,
			ol li {
				list-style: none;
			}


			img {
				width: 100%;
				height: 100%;
			}

			.list {
				position: absolute;
				bottom: 70px;
				left: 55px;

			}

			.list li {
				float: left;
				margin-right: 10px;
				width: 10px;
				height: 10px;
				background-color: rgba(0, 0, 0, 0.5);
				cursor: pointer;
			}

			.list .current {
				background-color: orange;
				;
			}

			.picture {
				position: absolute;
			}

			.picture li {
				position: absolute;
				width: 240px;
				height: 350px;
			}

			.text {
				position: absolute;
				bottom: 17px;
				left: 0;
				height: 20px;
				width: 240px;
			}

			.text li {
				position: absolute;
				width: 240px;
				height: 30px;
				z-index: 999;
				color: black;
				line-height: 30px;
				background-color: rgba(0, 0, 0, 0.5);

			}
		</style>
	</head>
	<body>
		<div class="a">
			<div class="container">
				<span class="left"><i></i></span>
				<span class="right"><i></i></span>
				<ul class="picture">
					<li><img src="./img/1.jpg"></li>
					<li><img src="./img/2.jpg"></li>
					<li><img src="./img/3.jpg"></li>
					<li><img src="./img/4.jpg"></li>
					<li><img src="./img/5.jpg"></li>
					<li><img src="./img/6.jpg"></li>
					<li><img src="./img/7.jpg"></li>
				</ul>
				<ol class="list">
				</ol>
			</div>
			<ol class="text">
				<li> 好浪漫！狮子猎豹蹲坐"彩虹尽头"</li>
				<li>刘炜宣布退役 回顾传奇"8号"</li>
				<li> 疑似吴亦凡女友生活照模样清纯</li>
				<li> 不做韭菜，叶女侠带你修炼</li>
				<li>007新武器阿斯顿·马丁Valhalla</li>
				<li>靠网红发卡凹出少女感</li>
				<li>河北饶阳："民族乐器进校园"</li>
			</ol>
		</div>
		<script src="public0.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var left = document.querySelector('.left');
			var right = document.querySelector('.right');
			var container = document.querySelector('.container');
			var picture = document.querySelector('.picture');
			var list = document.querySelector('.list');
			var text = document.querySelector('.text');
			var num = 0;
			var circle = 0;
			for (i = 0; i < picture.children.length; i++) {
				picture.children[i].style.left = i * 240 + 'px';
				text.children[i].style.left = i * 240 + 'px';
				var li = document.createElement('li');
				li.setAttribute('index', i);
				list.appendChild(li);
				li.addEventListener('mousemove', function() {
					for (var i = 0; i < list.children.length; i++) {
						list.children[i].className = '';
					}
					this.className = 'current';
					var index = this.getAttribute('index');
					num = index;
					circle = index;
					animate1(picture, -index * 240);
					animate1(text, -index * 240);
				})
			}
			//右侧点击事件
			right.addEventListener('click', function() {
				if (num == picture.children.length - 1) {
					picture.style.left = 0;
					num = 0;
				}
				num++;
				animate1(picture, -num * 240);
				animate1(text, -num * 240);
				circle++;
				if (circle == list.children.length) {
					circle = 0;
				}

				for (var i = 0; i < list.children.length; i++) {
					list.children[i].className = '';
				}
				list.children[circle].className = 'current';
			})
			// 左侧点击事件
			left.addEventListener('click', function() {
				if (num == 0) {
					picture.style.left = -(picture.children.length - 1) * 240 + 'px';
					num = picture.children.length - 1;
				}
				num--;
				animate1(picture, -num * 240);
				animate1(text, -num * 240);
				circle--;
				if (circle < 0) {
					circle = list.children.length - 1;
				}

				for (var i = 0; i < list.children.length; i++) {
					list.children[i].className = '';
				}
				list.children[circle].className = 'current';
			})

			var timer = setInterval(function() {
				right.click();
			}, 1000);
			container.onmouseover=function() {
				left.style.display = 'block';
				right.style.display = 'block';
				clearInterval(timer)
			}
			container.onmouseout=function() {
				left.style.display = 'none';
				right.style.display = 'none';
				timer = setInterval(function() {
					right.click();
				}, 1000);
			}
		</script>
	</body>
</html>
